<template>
<div class="classlist">
      <div v-for="(lesson,index) in lessons" :key="index">
      <span :class="{is_delete:lesson.isDelete}">{{lesson.title}}</span>
      <button @click="lesson.isDelete = !lesson.isDelete">{{ lesson.isDelete ? '取消' : '删除'}}</button>
      </div>
</div>
</template>

<script>
import lessons from "../../data/lesson.js"

export default {
  data(){
      return {
          lessons
      }
  }
}
</script>
<style lang="scss" scoped>
.classlist{
    div{
        display: flex;
        justify-content: space-between;
        span{
            &.is_delete{
                text-decoration: line-through;
                background-color: gray;
            }
        }
    }
}
</style>